<template>
  <div class="flex flexColumn flex1 h100">
    <div class="title">
      <span>首页 &gt; 商品统计 </span>
    </div>
    <div class="main flex flexColumn">
      <div class="main-title">商品统计</div>
      <div class="flex prostatistics-timer">
        <span>时间范围</span>
        <div>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <el-button type="goon">查询</el-button>
      </div>
      <div style="height: 800px" ref="proChart" class="proChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      value1: "",
      option: {},
    };
  },
  mounted() {
    let myChart = echarts.init(this.$refs.proChart);

    var builderJson = {
      all: 10887,
      charts: {
        map: 3237,
        lines: 2164,
        bar: 7561,
        line: 7778,
        pie: 7355,
        scatter: 2405,
        candlestick: 1842,
        radar: 2090,
        heatmap: 1762,
        treemap: 1593,
        graph: 2060,
        boxplot: 1537,
        parallel: 1908,
        gauge: 2107,
        funnel: 1692,
        sankey: 1568,
      },
      components: {
        geo: 2788,
        title: 9575,
        legend: 9400,
        tooltip: 9466,
        grid: 9266,
        markPoint: 3419,
        markLine: 2984,
        timeline: 2739,
        dataZoom: 2744,
        visualMap: 2466,
        toolbox: 3034,
        polar: 1945,
      },
      ie: 9743,
    };

    var downloadJson = {
      "echarts.min.js": 17365,
      "echarts.simple.min.js": 4079,
      "echarts.common.min.js": 6929,
      "echarts.js": 14890,
    };

    var themeJson = {
      "dark.js": 1594,
      "infographic.js": 925,
      "shine.js": 1608,
      "roma.js": 721,
      "macarons.js": 2179,
      "vintage.js": 1982,
    };

    var waterMarkText = "ECHARTS";

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = canvas.height = 100;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.globalAlpha = 0.08;
    ctx.font = "20px Microsoft Yahei";
    ctx.translate(50, 50);
    ctx.rotate(-Math.PI / 4);
    ctx.fillText(waterMarkText, 0, 0);

    this.option = {
      backgroundColor: {
        type: "pattern",
        image: canvas,
        repeat: "repeat",
      },
      tooltip: {},
      title: [
        {
          text: "在线构建",
          subtext: "总计 " + builderJson.all,
          left: "25%",
          textAlign: "center",
        },
        {
          text: "各版本下载",
          subtext:
            "总计 " +
            Object.keys(downloadJson).reduce(function (all, key) {
              return all + downloadJson[key];
            }, 0),
          left: "75%",
          textAlign: "center",
        },
        {
          text: "主题下载",
          subtext:
            "总计 " +
            Object.keys(themeJson).reduce(function (all, key) {
              return all + themeJson[key];
            }, 0),
          left: "75%",
          top: "50%",
          textAlign: "center",
        },
      ],
      grid: [
        {
          top: 50,
          width: "50%",
          bottom: "45%",
          left: 10,
          containLabel: true,
        },
        {
          top: "55%",
          width: "50%",
          bottom: 0,
          left: 10,
          containLabel: true,
        },
      ],
      xAxis: [
        {
          type: "value",
          max: builderJson.all,
          splitLine: {
            show: false,
          },
        },
        {
          type: "value",
          max: builderJson.all,
          gridIndex: 1,
          splitLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "category",
          data: Object.keys(builderJson.charts),
          axisLabel: {
            interval: 0,
            rotate: 30,
          },
          splitLine: {
            show: false,
          },
        },
        {
          gridIndex: 1,
          type: "category",
          data: Object.keys(builderJson.components),
          axisLabel: {
            interval: 0,
            rotate: 30,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          type: "bar",
          stack: "chart",
          z: 3,
          label: {
            normal: {
              position: "right",
              show: true,
            },
          },
          data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
          }),
        },
        {
          type: "bar",
          stack: "chart",
          silent: true,
          itemStyle: {
            normal: {
              color: "#eee",
            },
          },
          data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.all - builderJson.charts[key];
          }),
        },
        {
          type: "bar",
          stack: "component",
          xAxisIndex: 1,
          yAxisIndex: 1,
          z: 3,
          label: {
            normal: {
              position: "right",
              show: true,
            },
          },
          data: Object.keys(builderJson.components).map(function (key) {
            return builderJson.components[key];
          }),
        },
        {
          type: "bar",
          stack: "component",
          silent: true,
          xAxisIndex: 1,
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: "#eee",
            },
          },
          data: Object.keys(builderJson.components).map(function (key) {
            return builderJson.all - builderJson.components[key];
          }),
        },
        {
          type: "pie",
          radius: [0, "30%"],
          center: ["75%", "25%"],
          data: Object.keys(downloadJson).map(function (key) {
            return {
              name: key.replace(".js", ""),
              value: downloadJson[key],
            };
          }),
        },
        {
          type: "pie",
          radius: [0, "30%"],
          center: ["75%", "75%"],
          data: Object.keys(themeJson).map(function (key) {
            return {
              name: key.replace(".js", ""),
              value: themeJson[key],
            };
          }),
        },
      ],
    };
    myChart.setOption(this.option);
  },
};
</script>

<style lang="less" scoped>
.main {
  .prostatistics-timer {
    span {
      line-height: 40px;
      font-size: 14px;
    }
    div {
      margin: 0 20px;
    }
  }
}
.el-button--goon {
  color: #fff;
  background-color: #706c61;
  border-color: #706c61;
}
.proChart {
  margin-top: 40px;
}
</style>